<!-- 1 定义组件模版 -->
<template>
    <div class="tableApp">

        <div class="header">
                <slot ></slot>
        </div>
        <div>表格的内容:

            <ul>
                <li v-for="row in tableData">{{ row.id }}  ---  {{ row.name }}
                    
                    <slot name="btnSlot" :rowData="row" :id="row.id"></slot>
                </li>
            </ul>

        </div>
       
        <div>其他内容...</div>
        <div>   <slot name="footer"></slot> </div>
    </div>
</template>

<!-- 2 定义组件逻辑 -->
<script setup lang="ts" name="Child">
import { ref } from 'vue'
defineProps(['tableData',"title"])

</script>

<!-- 3 定义样式 -->
<style scoped>
.tableApp {
    background-color: skyblue;
    border-radius: 5px;
    box-shadow: 0 0 10px;
    margin: 5px;
    padding: 5px;
    display: inline-block;
    min-width: 200px;
    min-height: 200px;
    vertical-align: top;
}

.header,
.footer {
    font-weight: 800;
    margin: 5px 0;

}
</style>